%center {
    display: flex;
    justify-content: center;
    align-items: center;
}

%table-page {
    padding-bottom: 20px;
    width: 100%;
    border-radius: 10px;
}

.i-row {
    display: flex;
}

.i-left {
    display: flex;
    justify-content: flex-start;
}

.i-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.i-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.i-vcenter {
    display: flex;
    align-items: center;
}

.i-card {
    width: calc(100% - 80px);
    margin: 0 auto 20px;
    padding: 20px 25px 20px  25px ;
    border-radius: 7px;
    border: 1px solid var(--el-border-color-light);
}

.i-success{
    background-color:#3491FA
}

.i-danger{
    background-color:#FF4D4F
}

.i-warning{
    background-color:#FFA940
}

.i-default{
    background-color:#D9D9D9
}

.i-font-success{
    color:#3491FA
}

.i-font-danger{
    color:#FF4D4F
}

.i-font-warning{
    color:#FFA940
}

.i-font-default{
    color:#D9D9D9
}

.i-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.i-circle{
    border-radius: 50%;
}

@for $i from -20 through 20 {
    .i-mtop#{$i} {
        margin-top: $i + px;
    }
    .i-mbottom#{$i} {
        margin-bottom: $i + px;
    }
    .i-mleft#{$i} {
        margin-left: $i + px;
    }
    .i-mright#{$i} {
        margin-right: $i + px;
    }
    .i-ptop#{$i} {
        padding-top: $i + px;
    }
    .i-pbottom#{$i} {
        padding-bottom: $i + px;
    }
    .i-pleft#{$i} {
        padding-left: $i + px;
    }
    .i-pright#{$i} {
        padding-right: $i + px;
    }
}

@for $i from 1 through 20 {
    .i-height#{$i} {
        height: $i * 10 + px;
    }
}

.i-pointer {
    cursor: pointer;
}

.i-section {
    overflow-y: auto;
    background: #F2F3F5;
    height: calc(100vh - 30px - var(--menu-header-height));
    padding: 15px;

    &-card {
        
        width: calc(100% - 20px);
        min-height: calc(100vh - 30px - var(--menu-header-height) - 50px);
        margin: 0 auto;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 8px 24px -2px rgb(0 0 0 / 3%);
    }
}


// Echarts 全局样式
.echarts-tooltip-diy {
    background: linear-gradient(304.17deg,
        rgb(253 254 255 / 60%) -6.04%,
        rgb(244 247 252 / 60%) 85.2%) !important;
    border: none !important;
  
    /* Note: backdrop-filter has minimal browser support */
  
    border-radius: 6px !important;
    backdrop-filter: blur(10px) !important;
  
    .content-panel {
      display: flex;
      justify-content: space-between;
      width: 164px;
      height: 32px;
      margin-bottom: 4px;
      padding: 0 9px;
      line-height: 32px;
      background: rgb(255 255 255 / 80%);
      border-radius: 4px;
      box-shadow: 6px 0 20px rgb(34 87 188 / 10%);
    }
  
    .tooltip-title {
      margin: 0 0 10px;
    }
  
    p {
      margin: 0;
    }
  
    .tooltip-title,
    .tooltip-value {
      display: flex;
      align-items: center;
      color: #1d2129;
      font-weight: bold;
      font-size: 13px;
      line-height: 15px;
      text-align: right;
    }
  
    .tooltip-item-icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 8px;
      border-radius: 50%;
    }
  }


.el-loading-mask {
    background-color: rgba(255, 255, 255, 0.5);
}